<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>点击echarts圆柱体事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
</head>

<body>
    <div id="echartBox" style=" 800px;height: 400px;margin: 50px auto;border: 1px solid #ccc;"></div>
</body>
<script type="text/javascript">
    window.onload = function () {
        var myChart = echarts.init(document.getElementById('echartBox'));
        // prettier-ignore
        const hours = [
            '11', '22', '33',
        ];
        // prettier-ignore
        const days = [
            'AA', 'BB', 'CC',
        ];
        // no need order
        const data = [
            [0, 0, '00','00'], [0, 1, '01'], [0, 2, '02'],

            [1, 0, '10','210'], [1, 1, '11'], [1, 2, '12'],

            [2, 0, '20','20'], [2, 1, '21'], [2, 2, '22'],

        ];
        option = {
            tooltip: {
                position: 'top'
            },
            grid: {
                height: '50%',
                top: '10%'
            },
            xAxis: {
                type: 'category',
                data: hours,
                splitArea: {
                    show: true
                }
            },
            yAxis: {
                type: 'category',
                data: days,
                splitArea: {
                    show: true
                }
            },
            visualMap: {
                min: 0,
                max: 30,
                calculable: true,
                orient: 'horizontal',
                left: 'center',
                bottom: '15%'
            },
            series: [
                {
                    name: 'Punch Card',
                    type: 'heatmap',
                    data: data,
                    label: {
                        show: true
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option, true);
        myChart.on('click', function (param) {
            console.log(param)
            //param参数包含的内容有： 
            //param.name：X轴的值 
            //param.data：Y轴的值 
            //param.value：Y轴的值 
            //param.type：点击事件均为click 
            //param.seriesName：legend的名称 
            //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个） 
            //param.dataIndex：数值序列（X轴上当前点是第几个点）
            //alert(param.seriesName);  //legend的名称
            alert(param.name);  //X轴的值
            alert(option.series[param.seriesIndex].barIds[param.dataIndex]);//获取自定义的值
        });
    }
</script>

</html>